<template>
     <scroll-view style="height: 100%;" :scroll-into-view="intoIndex" scroll-y="true" scroll-with-animation
            @scroll="scroll">
            <view class="network">
                <view :id="'slot'+index" class="network-item" v-for="(basePoint, index) in options" :key="index">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                {{ basePoint.title }}
                            </view>
                            <view class="bg"></view>
                        </view>
                        <ImgUpload v-if="basePoint.fileList" :title="basePoint.title"
                            :fileList="form[basePoint.prop].fileList" @change="(val) => fileChange(val, basePoint.prop)">
                        </ImgUpload>
                    </view>
                    <view v-if="basePoint.defaultModel" class="defaultModel">
                        <view class="d_model" v-for="(d_item, d_index) in basePoint.children" :key="d_index">
                            <view class="child" v-for="(item1, index1) in d_item" :key="index1">
                                <view class="child-title">
                                    <view class="title">{{ item1.title }}
                                    </view>
                                    <image class="del" @tap="delItem(index, d_index, basePoint.prop)"
                                        v-if="d_index != 0 && index1 == 0" src="/static/del1.png"></image>
                                </view>
                                <view class="fileds" v-if="item1.type == 'input'">
                                    <input class="cinput" type="text"
                                        v-model="form[basePoint.prop].children[d_index][item1.prop]"
                                        :placeholder="item1.placeholder">
                                </view>
                                <view class="fileds size" v-if="item1.type == 'size'">
                                    <input class="cinput size-input" type="text"
                                        v-model="form[basePoint.prop].children[d_index][item1.propSize]"
                                        :placeholder="item1.placeholder">
                                    <view class="xxx">
                                        X
                                    </view>
                                    <input class="cinput num"
                                        v-model="form[basePoint.prop].children[d_index][item1.propNum]" type="number">
                                </view>
                                <view class="fileds" v-if="item1.type == 'radio'">
                                    <u-radio-group v-model="form[basePoint.prop].children[d_index][item1.prop]"
                                        placement="row">
                                        <u-radio style="margin-left: 20rpx;" v-for="(radio, rindex) in item1.options"
                                            :key="rindex" :label="radio.label" :name="radio.value"></u-radio>
                                    </u-radio-group>
                                </view>
                                <view class="fileds cdata-box" v-if="item1.type == 'date'">
                                    <view @tap="d_dataOpen(index, d_index, index1)" class="cinput"
                                        :style="{ color: form[basePoint.prop].children[d_index][item1.prop] ? '#282828' : '#B8B8B8' }">
                                        {{ formatDate(form[basePoint.prop].children[d_index][item1.prop]) ||
                                            item1.placeholder
                                        }}
                                    </view>
                                    <image class="cicon" src="/static/right.png"></image>
                                    <u-datetime-picker :show="item1.show"
                                        v-model="form[basePoint.prop].children[d_index][item1.prop]" mode="date"
                                        @cancel="d_closeDate(index, d_index, index1)"
                                        @confirm="d_closeDate(index, d_index, index1)"></u-datetime-picker>
                                </view>
                                <view class="fileds contact" v-if="item1.type == 'contact'">
                                    <input class="cinput name" style="width:150rpx" type="text"
                                        v-model="form[basePoint.prop].children[d_index][item1.propName]"
                                        :placeholder="'姓名'">
                                    <input class="cinput phone" style="margin-left: 60rpx;flex:1"
                                        v-model="form[basePoint.prop].children[d_index][item1.propPhone]" type="number"
                                        :placeholder="'电话'">
                                </view>
                            </view>
                        </view>
                        <view class="add-box">
                            <image class="add" @tap="addItem(index, basePoint.prop)" src="/static/add_incident.png"></image>
                        </view>
                    </view>
                    <view v-else class="child" v-for="(item1, index1) in basePoint.children" :key="index1">
                        <view class="child-title" v-if="item1.title">
                            <view class="title">{{ item1.title }}</view>
                            <view class="canUse" v-if="item1.propCan">
                                <view class="btn" @tap="canUseChange('0', basePoint.prop, item1.propCan)"
                                    :class="{ active: form[basePoint.prop][item1.propCan] == '0' }">无
                                </view>
                                <view class="btn" @tap="canUseChange('1', basePoint.prop, item1.propCan)"
                                    :class="{ active: form[basePoint.prop][item1.propCan] == '1' }">有
                                </view>
                            </view>
                        </view>
                        <view class="fileds" v-if="item1.type == 'textarea'">
                            <view v-if="item1.decs && item1.decs.length != 0">
                                <view class="dec" :class="[dec.wrap ? 'no-wrap' : '']" v-for="(dec, decIndex) in item1.decs"
                                    :key="decIndex">
                                    <view class="label">
                                        {{ dec.label }}
                                    </view>
                                    <view class="value">
                                        {{ dec.value }}
                                    </view>
                                </view>
                            </view>

                            <textarea :maxlength="-1"  class="my-textarea" v-model="form[basePoint.prop][item1.prop]"
                                :placeholder="item1.placeholder"></textarea>
                        </view>
                        <view class="fileds" v-if="item1.type == 'input'">
                            <input class="cinput" type="text" v-model="form[basePoint.prop][item1.prop]"
                                :placeholder="item1.placeholder">
                        </view>
                        <view class="fileds size" v-if="item1.type == 'size'">
                            <input class="cinput size-input" type="text" v-model="form[basePoint.prop][item1.prop]"
                                :placeholder="item1.placeholder">
                            <view class="xxx">
                                X
                            </view>
                            <input class="cinput num" v-model="form[basePoint.prop][item1.propNum]" type="number">
                        </view>
                        <view class="fileds" v-if="item1.type == 'radio'">
                            <u-radio-group v-model="form[basePoint.prop][item1.prop]" placement="row">
                                <u-radio style="margin-left: 20rpx;" v-for="(radio, rindex) in item1.options" :key="rindex"
                                    :label="radio.label" :name="radio.value"></u-radio>
                            </u-radio-group>
                        </view>
                        <view class="fileds cdata-box" v-if="item1.type == 'date'">
                            <view @tap="dataOpen(index, index1)" class="cinput"
                                :style="{ color: form[basePoint.prop][item1.prop] ? '#282828' : '#B8B8B8' }">
                                {{ formatDate(form[basePoint.prop][item1.prop]) || item1.placeholder }}
                            </view>
                            <image class="cicon" src="/static/right.png"></image>
                            <u-datetime-picker :show="item1.show" v-model="form[basePoint.prop][item1.prop]" mode="date"
                                @cancel="closeDate(index, index1)" @confirm="closeDate(index, index1)"></u-datetime-picker>
                        </view>
                        <view class="fileds contact" v-if="item1.type == 'contact'">
                            <input class="cinput name" style="width:150rpx" type="text"
                                v-model="form[basePoint.prop][item1.propName]" :placeholder="'姓名'">
                            <input class="cinput phone" style="margin-left: 60rpx;flex:1"
                                v-model="form[basePoint.prop][item1.propPhone]" type="number" :placeholder="'电话'">
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
</template>

<script>
import { formatDate } from "@/utils/utils"
export default {
    props: {
        intoIndex: {
            type: String,
            default: ''
        },
        configs: Array,
        modelForm: Object
    },
    // 局部注册的组件
    components: {},

    created() {
        this.form = uni.$u.deepClone(this.modelForm)
        this.options=uni.$u.deepClone(this.configs)
    },

    watch: {
        form: {
            handler(val) {
                this.$emit('getForm', val)
            },
            deep: true,
            immediate: true
        }
    },

    data() {
        return {
            form: null,
            options:[]
        }
    },
    // 计算属性
    computed: {},
    // 组件方法
    methods: {
        scroll(e) {

        },
        fileChange(val, key) {
            this.form[key].fileList = val
        },
        dataOpen(index, index1) {
            this.options[index].children[index1].show = true
        },
        closeDate(index, index1) {
            this.options[index].children[index1].show = false
        },
        d_dataOpen(index, d_index, index1) {
            console.log(index, d_index, index1,this.options[index].children[d_index][index1].show)
            this.options[index].children[d_index][index1].show = true
        },
        d_closeDate(index, d_index, index1) {
            this.options[index].children[d_index][index1].show = false
        },
        formatDate(time) {
            if (!time) return ''
            return formatDate(new Date(time))
        },
        addItem(index, prop) {
            let defaultValue = this.options[index].defaultValue
            let defaultModel = this.options[index].defaultModel
            this.form[prop].children.push(defaultValue)
            this.options[index].children.push(defaultModel)
        },
        delItem(index, d_index, prop) {
            this.form[prop].children.splice(d_index, 1)
            this.options[index].children.splice(d_index, 1)
        },
        canUseChange(val, prop, propCan) {
            this.form[prop][propCan] = val
        }


    },
}
</script> 

<style scoped lang="scss" src="./assets/index.scss"></style>
